<template>
	<view class="my-address">
		<view class="no-address" v-if="JSON.stringify(address) === '{}'">
			<button @click="getAddress" type="primary" size="mini">请选择收货地址+</button>
		</view>
		<view @click="getAddress" class="has-address" v-else>
			<view class="top-info">
				<view class="name">收货人：{{ address.userName }}</view>
				<view class="phone">
					电话：{{ address.telNumber }}
					<uni-icons class="righticon" type="right" size="20"></uni-icons>
				</view>

			</view>
			<div class="bottom">
				收货地址：{{ fullAddress }}
			</div>
		</view>
		<image class="myimg" src="../../static/images/cart_border@2x.png" mode=""></image>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		name: "my-address",
		data() {
			return {
				// address: {}
			}
		},
		computed: {
			...mapState('user', ['address']),
			...mapGetters('user', ['fullAddress'])
			// fullAddress() {
			// 	return this.address.provinceName + this.address.cityName + this.address.countyName + this.address
			// 		.detailInfo
			// }

		},
		methods: {
			...mapMutations('user', ['setAddress']),
			// 得到收货地址
			async getAddress() {
				const [err, res] = await uni.chooseAddress()
				console.log(res)
				if (err) return uni.$showMsg()
				// 保存数据到 address
				// this.address = res
				this.setAddress(res)
			}
		}
	}
</script>

<style lang="scss">
	.my-address {
		.no-address {
			height: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.has-address {
			font-size: 14px;
			padding: 40rpx 20rpx;

			.top-info {
				display: flex;
				justify-content: space-between;

				.name {}

				.phone {
					.righticon {
						vertical-align: middle;
					}
				}
			}

			.bottom {}
		}

		.myimg {
			width: 100%;
			height: 10rpx;
			vertical-align: middle;
		}
	}
</style>
